<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/public/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/public/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/indexPage.css"/>
		<link rel="stylesheet" type="text/css" href="css/commodityDetail.css"/>
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/public.js"></script>
		<script type="text/javascript" src="js/pageJs/commodityDetail.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		
		<!--[if lt IE 9]>
      	<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      	<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
	</head>
	<body>
		<!-- header start -->
		<div id="header"></div>
		<!-- header end -->
		
		<!-- position start -->
		<div class="position">
			<div class="container">
				<ul>
					<li><a href="indexPage.html">首页</a> > </li>
					<li><span>商品</span> > </li>
					<li><span id="position">360</span></li>
				</ul>
			</div>
		</div>
		<!-- position end -->
		
		<!-- goodDetail start-->
		<div class="goodDetail">
			<div class="topInfo container clearfix">
				<div class="leftImg fl-l">
					<div id="showbox" class="">
					 <!--  <img src="images/04-1.JPG" width="430" height="430" />
					  <img src="images/04-2.JPG" width="430" height="430" />
					  <img src="images/04-3.JPG" width="430" height="430" />
					  <img src="images/04-4.JPG" width="430" height="430" /> -->
					</div><!--展示图片盒子-->
					<div id="showsum" class=""></div>
				</div>
				<div class="rightBox fl-r">
					<ul>
						<li><span class="caption" id="caption"></span></li>
						<li><span class="topDesc" id="topDesc">重量：12.3kg↵尺寸：600*480*685mm↵靠背角度3档调节↵重量：12.3kg↵尺寸：600*480*685mm↵靠背角度3档调节↵重量：12.3kg↵尺寸：600*480*685mm↵靠背角度3档调节</span></li>
						<li><span>￥</span><span id="price"></span><span style="font-size:16px;">&nbsp;艾乐币</span></li>
						<li class="clearfix">
							<span class="fl-l">类型：</span><em></em>
							<div class="classic fl-l">
								<span class="color on">0-4岁</span>
								<span class="color">0-7岁</span>
								<span class="color">9个月-12岁</span>
								<span class="color">9个月-6岁</span>
								<span class="color">9个月-7岁</span>
							</div>
						</li>
						<li class="goodsNum clearfix">
							<span class="fl-l">数量：</span>
							<div class="addCount clearfix fl-l">
								<span class="cut" id="cutSpan">-</span>
								<span class="num" id="numSpan">1</span>
								<span class="add" id="addSpan">+</span>
							</div>
						</li>
					</ul>
					<div class="action">
						<button  type="button" class="btn btn-danger" id="buyNow">立即购买</button>
						<button  type="button" class="btn btn-info addCart" id="addCart">加入购物车</button>
						<span id="addSuccess"><i class="fa fa-ok"></i>&nbsp;添加购物车成功</span>
					</div>
				</div>
			</div>
			<div class="bottomInfo">
				<div class="container">
					<div>
						<ul id="myTab" class="nav nav-tabs">
							<li class="active">
								<a href="#goodsInfo" data-toggle="tab">
									 产品信息
								</a>
							</li>
							<li><a href="#comment" data-toggle="tab" >商品评论</a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<div class="tab-pane fade in active detail_img" id="goodsInfo">
								<div class="detailInfo">
									<ul>
										<li> <span>商品名称</span><span class='text' name='goodsName'>好孩子CS308</span></li>
										<li><span>上架时间</span><span class='text' name='upTime'>好孩子CS308</span></li>
										<li><span>类&emsp;&emsp;型</span><span class='text' name='fixedWay'>好孩子CS308</span></li>
										<li><span>安装方式</span><span  class='text' name='installWay'>好孩子CS308</span></li>
										<li><span>适合年龄</span><span class='text' name='suitAge'>好孩子CS308</span></li>
										<li><span>适合体重</span><span class='text' name='suitWeight'>好孩子CS308</span></li>
										<li><span class='miaosu'>详细描述</span><span class='text miaosuCon' name='characterDesc'>重量：12.3kg↵尺寸：600*480*685mm↵靠背角度3档调节↵重量：12.3kg↵尺寸：600*480*685mm↵靠背角度3档调节↵重量：12.3kg↵尺寸：600*480*685mm↵靠背角度3档调节↵</span></li>
									</ul>
								</div>
								<div>
									<img src="images/dt-1.jpg" alt="" />
									<img src="images/dt-2.jpg" alt="" />
									<img src="images/dt-3.jpg" alt="" />
									<img src="images/dt-4.jpg" alt="" />
									<img src="images/dt-5.gif" alt="" />
									<img src="images/dt-5.jpg" alt="" />
								</div>
							</div>
							<div class="tab-pane fade " id="comment">
								<div class="orderType">
									<span>排序方式：</span>
									<span class="text">默认</span>
									<span class="text">评价时间 <i class="fa fa-arrow-down"></i></span>
								</div>
								<div class="commentList">
									<ul>
										
									</ul>
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<!--goodDetail end-->
		
		<!-- 模态框 -->
		<div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="tipModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="tipModalLabel">
							您还没有登录,现在去登录？
						</h4>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" id="sureBtn" data-dismiss="modal">确定
						</button>
						<button type="button" class="btn btn-default"  id="" data-dismiss="modal">
							取消
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
		<!--footer start-->
		<div id="footer"></div>
		<!--footer end-->
		
		<script type="text/javascript">
		 $(document).ready(function(){
			  /* var showproduct = {
				  "boxid":"showbox",
				  "sumid":"showsum",
				  "boxw":400,//宽度,该版本中请把宽高填写成一样
				  "boxh":400,//高度,该版本中请把宽高填写成一样
				  "sumw":60,//列表每个宽度,该版本中请把宽高填写成一样
				  "sumh":60,//列表每个高度,该版本中请把宽高填写成一样
				  "sumi":7,//列表间隔
				  "sums":5,//列表显示个数
				  "sumsel":"sel",
				  "sumborder":1,//列表边框，没有边框填写0，边框在css中修改
				  "lastid":"showlast",
				  "nextid":"shownext"
				  };//参数定义	  
			 $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行 */
		  }); 
		</script>
	</body>
</html>
